<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            display: flex;
            width: 1200px;
            flex-wrap: wrap;
            margin: auto;
        }

        li {
            width: 23%;
            margin: 1%;
            border: 1px solid #ddd;
            text-align: center;
            box-sizing: border-box;
        }
        img {
            width: 100%;
        }

        .disabled {
            color: #999;
        }
    </style>
</head>
<body>

    <div class="search">
        <input type="text">
        <button>搜索</button>
    </div>
    <br><br>
    <div class="sort">
        <button>价格升序</button>
        <button>价格降序</button>
        <button>销量升序</button>
        <button>销量降序</button>
    </div>

    <ul>

    </ul>


    <div class="page">
        <span class="prev disabled">&lt;</span>
        <span class="showPage">1 / 2</span>
        <span class="next">&gt;</span>
    </div>

    <script src="../js/ajax.js"></script>
    <script>

        // 分页：  
        //    前端完成分页
        //       后端给了所有的数据 
        //    后端分页了以后把数据给我们


        // 分页需要明确的问题
        //    每页显示多少条数据
        //    总共有多少条数据  --- 总共有多少页


        // 每页显示的数据条数
        let num = 4 ;
        // 默认显示第一页的数据
        let page = 1 ;

        // 默认升序 --- 也可以写降序
        let orderType = 1 ;

        // 默认按照goods_id排序
        let orderName = 'goods_id' ;

        // 搜索的字段
        let kw = '' ;

        // 总页数
        let pageAll ;


        // 路径：  http://43.138.81.225/php/all.php
        // 请求的方式：get
        // 参数说明：
        //     排序的方式:orderType    number     1升序   2降序
        //     排序的字段:orderName    string    价格goods_price / 销量 goods_xiaoLiang / 默认goods_id
        //     每页显示的数量:num          number     每页显示的数量
        //     显示第几页的数据:page         number     页数 
        //     搜索的关键字:kw           string     可以为空


        // 1 默认显示第一页的数据
        ajax({
            type : 'get' ,
            path : 'http://43.138.81.225/php/all.php' ,
            data : {
                orderType ,
                orderName ,
                num ,
                page ,
                kw
            } , 
            success : res => {
                console.log(res);
                const {status , data ,} = res ;
                if(status) {

                    render(res);
                }
            }
        })


        // 2 分页
        // 下翻页
        const oNext = document.querySelector('.next') ;
        const oPrev = document.querySelector('.prev') ;
        oNext.onclick = function() {
            // 判断能不能加
            if(this.classList.contains('disabled')) {
                return 
            }

            page++;
            if(page === pageAll) {
                this.classList.add('disabled');
            }

            // 给左边的去掉disabled
            if(oPrev.classList.contains('disabled')) {
                oPrev.classList.remove('disabled');
            }
            

            
            ajax({
                type : 'get' ,
                path : 'http://43.138.81.225/php/all.php' ,
                data : {
                    orderType ,
                    orderName ,
                    num ,
                    page ,
                    kw
                } , 
                success : res => {
                    console.log(res);
                    const {status , data ,} = res ;
                    if(status) {
                        render(res);
                    }
                }
            })
        }


        // 上翻页
        oPrev.onclick = function() {
            // 判断能不能减
            if(this.classList.contains('disabled')) {
                return 
            }

            page--;
            if(page === 1) {
                this.classList.add('disabled');
            }

            // 给右边的去掉disabled
            if(oNext.classList.contains('disabled')) {
                oNext.classList.remove('disabled');
            }
            

            
            ajax({
                type : 'get' ,
                path : 'http://43.138.81.225/php/all.php' ,
                data : {
                    orderType ,
                    orderName ,
                    num ,
                    page ,
                    kw
                } , 
                success : res => {
                    console.log(res);
                    const {status , data ,} = res ;
                    if(status) {
                        render(res);
                    }
                }
            })
        }



        function render(res) {
            const {data , total} = res ;
            // 渲染页面
            const oUl = document.querySelector('ul');
            let html = '' ;
            data.forEach(item => {
                html += `
                <li>
                    <a href="./06_商品详情页.html?suiBian=${item.goods_id}">
                        <img src="${item.goods_img}" alt="">
                        <h3>${item.goods_title}</h3>
                        <p>${item.goods_des}</p>
                        <strong>${item.goods_price}</strong>
                    </a>
                </li>
                `
            })
            oUl.innerHTML = html ;

            // 渲染分页
            const oShowPage = document.querySelector('.showPage') ;
            pageAll = Math.ceil(total / num) ;
            oShowPage.innerHTML = page + ' / ' + pageAll ;
        }


    </script>

    
</body>
</html>